<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="个人资料"></commonTitle>
		</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<view class="user-info-item" @click="choseImg">
				<view class="item-title">头像</view>
				<view class="item-right">
					<image :src="userInfo.headimg?getImgUrl(userInfo.headimg):'../../static/common/baseinfo-user'" class="user-avator-small"></image>
					<image src="../../static/common/question-icon.png" class="question-icon"></image>
				</view>
			</view>
			
			<view class="user-info-item">
				<view class="item-title">用户ID</view>
				<view class="item-right">
					<view class="user-text">{{userInfo.id}}</view>
					<image src="../../static/common/question-icon.png" class="question-icon"></image>
				</view>
			</view>
			
			<view class="user-info-item" @tap="openModel('Nickname')">
				<view class="item-title">昵称</view>
				<view class="item-right">
					<view class="user-text">{{userInfo.nickName}}</view>
					<!-- <view class="user-text2">13/16</view> -->
				</view>
			</view>
			
			<view class="user-info-item" @tap="openModel('Phone')">
				<view class="item-title">手机号</view>
				<view class="item-right">
					<view class="user-text2">{{userInfo.phone?userInfo.phone:"未绑定"}}</view>
				</view>
			</view>
			
			<!-- <view class="user-info-item">
				<view class="item-title">填写邀请人</view>
				<view class="item-right">
					<view class="user-text2">{{inviteId?inviteId:"未填写"}}</view>
				</view>
			</view> -->
			
			<view class="app-qcode">
				<view class="qcode-text">面对面扫描下载安装</view>
				<canvas  canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}"></canvas>
			</view>
		</view>
		
		<!-- 邀请人ID -->
		<uni-popup ref="showInvite" :type="type2">
			<view class="setInviteID">
				<view class="invite-title">填写邀请人ID</view>
				<view class="invite-small-title">填写邀请人ID</view>
				<input type="number" focus="true" class="invite-input" v-model="inviteId"/>
				<view class="invite-btns">
					<view class="invite-cancle" @tap="cancel('Invite')">取消</view>
					<view class="invite-submit" @tap="setInviteID">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 手机号 -->
		<uni-popup ref="showPhone" :type="type2">
			<view class="setInviteID">
				<view class="invite-title">填写手机号</view>
				<view class="invite-small-title">填写手机号</view>
				<input type="number" focus="true" class="invite-input" v-model="userInfo.phone"/>
				<view class="invite-btns">
					<view class="invite-cancle" @tap="cancel('Phone')">取消</view>
					<view class="invite-submit" @tap="setPhone">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 修改昵称 -->
		<uni-popup ref="showNickname" :type="type2">
			<view class="setNickname">
				<view class="invite-title">修改昵称</view>
				<view class="invite-small-title">修改昵称</view>
				<input type="text" focus="true" class="invite-input" v-model="userInfo.nickName"/>
				<view class="invite-btns">
					<view class="invite-cancle" @tap="cancel('Nickname')">取消</view>
					<view class="invite-submit" @tap="setNickname">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import commonTitle from'../../components/titile/title.vue'
	import uniPopup  from'../../components/uni-popup/uni-popup.vue'
	import { pathToBase64, base64ToPath } from '../../js_sdk/gsq-image-tools/image-tools/index.js'
	import uQRCode from '../../util/uqrcode.js'
	export default{
		components:{
			commonTitle,
			uniPopup
		},
		data () {
			return {
				loadingType: 'more',
				type: 'bottom',
				type2:"center",
				apptoken:"",
				headimg:"",
				userInfo:"",
				inviteId:"",
				phone:"",
				qrcodeSize:150,
				qrImg:""
			}
		},
		onLoad() {
			this.apptoken = uni.getStorageSync("apptoken");
			this.getUserInfo();
		},
		methods: {
			makeQrcodeImg(url){
				const _this = this;
				//生成二维码
				uQRCode.make({
					canvasId: 'qrcode',
					text: url,
					size: _this.qrcodeSize,
					margin: 10,
					success: res => {
						console.log(res)
						_this.qrImg = res;
						
					}
				})
			},
			getImgUrl(url){
				if(url.indexOf('http')==-1){
					return this.$CommonJS.baseurl + url;
				}else{
					return url
				}
				
			},
			getUserInfo(){
				//获取用户信息
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.userView,
					data:{
						apptoken:this.apptoken
					},
					success(res) {
							console.log(res)
							if(res.data.success){
								_this.userInfo = res.data.data;
								_this.makeQrcodeImg(res.data.data.inviteUrl)
							}
					}
				})
			},
			choseImg(){
				//打开相册
				const _this = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
				      //console.log(JSON.stringify(res.tempFilePaths));
							//#ifdef APP-PLUS
								uni.getImageInfo({
										src: res.tempFilePaths[0],
										success: function (image) {
												pathToBase64(image.path)
												  .then(base64 => {
														uni.request({
															url:_this.$API.URL + _this.$API.userSetheadimg,
															data:{apptoken:_this.apptoken,headimg:base64},
															method:"POST",
															header:{
																'content-type':'application/x-www-form-urlencoded'
															},
															success(resp) {
																console.log(resp)
																if(resp.data.success){
																	_this.$CommonJS.showToast("头像上传成功")
																
																	_this.userInfo.headimg = resp.data.data.headimg;
																}else{
																	_this.$CommonJS.showToast(resp.data.msg);
																}
															}
														})
												  })
												  .catch(error => {
												    console.error(error)
												  })
										}
								});
							//#endif
							//#ifdef MP-WEIXIN
							/*uni.getFileSystemManager().readFile({
							    filePath: res.tempFilePaths[0], //选择图片返回的相对路径
							    encoding: 'base64', //编码格式
							    success: res => { //成功的回调
							        let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
							       _this.setingHeadImg(base64);
							    }
							})*/
							//#endif
				    }
				});
			},
			setingHeadImg(url){
				uni.request({
					url:_this.$API.URL + _this.$API.userSetheadimg,
					data:{apptoken:_this.apptoken,headimg:url},
					success(resp) {
						console.log(resp)
					}
				})
			},
			setNickname(){
				//昵称
				const _this = this;
				if(this.userInfo.nickName !== ""){
					uni.request({
						url:_this.$API.URL + _this.$API.updateNickname,
						data:{apptoken:_this.apptoken,nickName:this.userInfo.nickName},
						success(resp) {
							console.log(resp)
							if(resp.data.success){
								_this.cancel('Nickname');
							}else{
								uni.showToast({
									title:resp.data.msg
								})
							}
						}
					})
				}
			},
			setPhone(){
				//手机号
				const _this = this;
				console.log(this.userInfo.phone)
				const phone = this.userInfo.phone;
				//验证手机号
				 if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){ 
				       this.$CommonJS.showToast("手机号码有误，请重填")
				  }else{
						uni.request({
							url:_this.$API.URL + _this.$API.userPhone,
							data:{apptoken:_this.apptoken,phone:phone},
							success(resp) {
								console.log(resp)
								if(resp.data.success){
									_this.cancel('Phone');
								}else{
									uni.showToast({
										title:resp.data.msg
									})
								}
							}
						})
					} 
					
			},
			setInviteID(){
				//填写邀请人ID
				const _this = this;
				if(this.inviteId !== ""){
					
				}
			},
			openModel(name){
				this.$refs['show' + name].open();
			},
			cancel(type) {
				this.$refs['show' + type].close()
			}
		}
		
	}
</script>

<style>
	@import url("user-info.css");
</style>
